<!DOCTYPE html>
<html>
<head>
<title>User Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--//webfonts-->
<link rel="stylesheet" href="{{ url_for('static',filename='css/login.css') }}">
{#<script src="http://ajax.useso.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>#}
</head>
<body>
<script>$(document).ready(function(c) {
    $('.close').on('click', function(c){
		$('.login-form').fadeOut('slow', function(c){
	  		$('.login-form').remove();
		});
	});
});
</script>
 <!--SIGN UP-->
 <h1><font color="black">Karaoke TV User Login<font></h1>
<div class="login-form">
	<div class="close"> </div>
		<div class="head-info">
			<label class="lbl-1"> </label>
			<label class="lbl-2"> </label>
			<label class="lbl-3"> </label>
		</div>
			<div class="clear"> </div>
	<div class="avtar">
		<img src="{{ url_for('static',filename='images/avtar.png') }}" />
	</div>
			<form action="{{ url_for('userlogin') }}" method="post">
					<input type="text" class="text" name="username" value="Card_ID" onfocus="this.value = '';"
                           onblur="if (this.value == '') {this.value = 'Card_ID';}" >
						<div class="key">
					<input type="password" name="password" value="Password" onfocus="this.value = '';"
                           onblur="if (this.value == '') {this.value = 'Password';}">
						</div>

                <div class="signin">
                    <input type="submit" value="Login" >
                </div>
            </form>


</body>
</html>